<template>
  <!-- 处方组件 -->
  <div>
    <!-- 价格 -->
    <div>
      <div
        class="background_gray padding_15 margin_top_20"
        style="border-radius: 5px; font-weight: 600"
      >
        价格
      </div>
      <!-- 价格 -->
      <label>
        <div class="flex_y_center" style="margin-top: 20px">
          <div class="inp_title">价格：</div>
          <div style="width: 15%">
            <el-input v-model="squareForm.goods_price" placeholder="请输入价格">
              <template slot="prepend">￥</template>
            </el-input>
          </div>
        </div>
      </label>
    </div>
    <!-- 商品属性 -->
    <div style="margin-top: 15px">
      <div
        class="background_gray padding_15"
        style="border-radius: 5px; font-weight: 600"
      >
        商品属性
      </div>
      <!-- 选择模板 -->
      <div class="flex_y_center" style="margin-top: 20px">
        <div class="inp_title">选择模板：</div>
        <el-select v-model="extend_id" placeholder="请选择商品模板">
          <el-option
            v-for="(item, index) of template_item"
            :key="index"
            :label="item.extend_name"
            :value="item.id"
          />
        </el-select>
        <el-link style="margin: 0 5px" type="primary" @click="dialog = true">
          新增
        </el-link>
        <el-link type="primary" @click="getExtendList">刷新</el-link>
      </div>
      <!-- 药品模板 -->
      <div style="display: flex; margin-top: 20px">
        <div class="inp_title">
          <span>*</span>
          药品模板：
        </div>
        <div style="width: 90%">
          <el-button type="primary" @click="push">添加药品模板</el-button>
          <el-table :data="extend_fields" style="margin-top: 10px">
            <el-table-column label="名称">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" placeholder="请输入名称" />
              </template>
            </el-table-column>
            <el-table-column label="类型">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.type"
                  placeholder="请选择类型"
                  @change="selType(scope.row)"
                >
                  <el-option
                    v-for="(item, index) of type"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="默认值">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.default"
                  :disabled="
                    scope.row.type != 'input_str_w' &&
                    scope.row.type != 'input_num_w' &&
                    scope.row.type != 'input_str_r' &&
                    scope.row.type != 'input_num_r'
                  "
                  :placeholder="
                    '请输入默认值' +
                    (scope.row.type == 'input_str_r' ||
                    scope.row.type == 'input_num_r'
                      ? '(必填)'
                      : '')
                  "
                />
              </template>
            </el-table-column>
            <el-table-column label="内容">
              <template slot-scope="scope">
                <el-input
                  v-if="
                    scope.row.type != 'input_select' &&
                    scope.row.type != 'input_checkbox' &&
                    scope.row.type != 'input_radio'
                  "
                  disabled
                  placeholder="请输入内容"
                />
                <!-- 下拉框选项 -->
                <div
                  v-else-if="
                    scope.row.type == 'input_select' ||
                    scope.row.type == 'input_checkbox' ||
                    scope.row.type == 'input_radio'
                  "
                >
                  <div
                    v-for="(item, index) in scope.row.option"
                    :key="index"
                    class="flex_y_center"
                  >
                    <el-input
                      v-model="scope.row.option[index]"
                      style="margin: 0 5px 5px 0"
                    />
                    <el-button
                      type="text"
                      @click="scope.row.option.splice(index, 1)"
                    >
                      移除
                    </el-button>
                  </div>
                  <el-button @click="scope.row.option.push('')">添加</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单位">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.unit"
                  :disabled="
                    scope.row.type == 'input_date' ||
                    scope.row.type == 'input_time'
                  "
                  placeholder="请输入单位"
                />
              </template>
            </el-table-column>
            <el-table-column label="单位">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  @click="extend_fields.splice(scope.$index, 1)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 营销方式 -->
      <div style="padding: 15px 0; display: flex">
        <!-- 单选 -->
        <div style="width: 80px; text-align: right">
          <span>*</span>
          营销方式：
        </div>
        <div class="flex_direction">
          <el-radio v-model="squareForm.expire_type" label="sale_at">
            销售日期
          </el-radio>
          <el-radio
            v-model="squareForm.expire_type"
            label="facture_at"
            style="margin: 15px 0"
          >
            出厂时间
          </el-radio>
          <el-radio v-model="squareForm.expire_type" label="long_at">
            永久有效
          </el-radio>
        </div>
      </div>
      <!-- 有效期输入框 -->
      <label class="flex_y_center">
        <div class="inp_title">
          <span v-if="squareForm.expire_type != 'long_at'">*</span>
          有效期：
        </div>
        <el-input
          v-model="squareForm.effective_at"
          :disabled="
            squareForm.expire_type == 'long_at' || squareForm.expire_type == ''
          "
          placeholder="请输入有效期天数"
          style="width: 15%"
        >
          <template slot="append">天</template>
        </el-input>
      </label>
      <!-- 开售时间 -->
      <div class="flex_y_center margin_top_20">
        <div style="width: 80px; text-align: right">
          <span>*</span>
          开售时间：
        </div>
        <div>
          <el-radio v-model="squareForm.goods_status" label="on">
            立即开售
          </el-radio>
          <el-radio v-model="squareForm.goods_status" label="off">
            放入仓库
          </el-radio>
        </div>
      </div>
      <!-- 商品详情 -->
      <div class="margin_top_20" style="display: flex">
        <div style="width: 80px; text-align: right">商品详情：</div>
        <Vue-editor
          :goods-desc="squareForm.goods_content"
          @sendText="goodsContent"
        />
      </div>
    </div>
    <!-- 添加商品 -->
    <div style="width: fit-content; margin: 20px auto 0">
      <el-button type="primary" @click="add">保存</el-button>
    </div>

    <el-dialog title="新增模板" :visible.sync="dialog" width="70%">
      <Extend @send="dialog = false" />
    </el-dialog>
  </div>
</template>

<script>
  import { getGoodsExtendList } from '@/api/commodity'
  import { mapState } from 'vuex'

  export default {
    components: {
      VueEditor: () => import('./editor.vue'),
      Extend: () => import('./extend.vue'),
    },
    props: {
      oGoodsDetailsInfo: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {
        dialog: false,
        template_item: [],
        type: [
          {
            name: '文字输入',
            id: 'input_str_w',
          },
          {
            name: '文字输入(只读)',
            id: 'input_str_r',
          },
          {
            name: '下拉菜单',
            id: 'input_select',
          },
          {
            name: '数字输入',
            id: 'input_num_w',
          },
          {
            name: '数字输入(只读)',
            id: 'input_num_r',
          },
          {
            name: '单选',
            id: 'input_radio',
          },
          {
            name: '复选',
            id: 'input_checkbox',
          },
          {
            name: '日期选择',
            id: 'input_date',
          },
          {
            name: '时间选择',
            id: 'input_time',
          },
        ],

        extend_id: '', // 商品模板名称
        extend_fields: [],
        squareForm: {
          is_many_attribute: 'N',
          delivery_method: 'no', // 送货方式
          goods_price: '0.00', // 商品价格
          extend_id: '', // 商品模板名称
          extend_fields: [], // 商品模板
          expire_type: 'long_at', // 营销方式
          effective_at: '', // 有效期
          goods_status: 'on', // 开售时间
          goods_content: '', // 商品详情
        },
      }
    },
    computed: {
      ...mapState({
        goodsTypeId: (state) => state.goods.goodsTypeId,
      }),
    },
    watch: {
      extend_id(newValue) {
        for (let item of this.template_item) {
          if (newValue == item.id) {
            this.extend_fields = JSON.parse(item.extend_fields)
          }
        }
      },
      'squareForm.expire_type'(newValue) {
        if (newValue == 'long_at') {
          this.depositForm.effective_at = ''
        }
      },
    },
    created() {
      this.assignForm()
      this.getExtendList()
    },
    methods: {
      // 将需要的数据赋值到相同属性值上
      assignForm() {
        if (JSON.stringify(this.oGoodsDetailsInfo) != '{}') {
          for (let item in this.squareForm) {
            if (item == 'extend_fields')
              this.extend_fields = JSON.parse(this.oGoodsDetailsInfo[item])
            else this.squareForm[item] = this.oGoodsDetailsInfo[item]
          }
        }
      },

      getExtendList() {
        const data = {
          type_id: this.goodsTypeId,
        }
        getGoodsExtendList(data).then((res) => {
          this.template_item = res.data
        })
      },
      // 给menuItem变量添加数据
      push() {
        this.extend_fields.push({
          name: '',
          type: '',
          default: '',
          unit: '',
        })
      },
      // 选择拓展字段类型
      selType(row) {
        if (
          row.type != 'input_select' &&
          row.type != 'input_checkbox' &&
          row.type != 'input_radio'
        ) {
          if (row.option) this.$delete(row, 'option')
        } else {
          this.$set(row, 'option', [''])
        }
      },
      add() {
        if (typeof this.squareForm.extend_fields != 'string')
          this.squareForm.extend_fields = JSON.stringify(this.extend_fields)
        this.$emit('sendData', this.squareForm)
      },
      goodsContent(text) {
        this.squareForm.goods_content = text
      },
    },
  }
</script>

<style scoped>
  .padding_15 {
    padding: 15px;
  }
  span {
    color: red;
  }
  .flex_direction {
    display: flex;
    flex-direction: column;
  }
  .background_gray {
    background-color: rgb(248, 248, 248);
  }
  .margin_top_20 {
    margin-top: 20px;
  }
  .inp_title {
    width: 80px;
    text-align: right;
  }
</style>
